<template>
  <div>
    <top-nav-bar :applyPageRoute="printtitle" @back="$router.go(-1)"></top-nav-bar>
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <div class="topCard">
          <div class="title">
            <!-- <span v-if="data.end_time<=nowDay">
              <a-tag color="#999">已结束</a-tag>
            </span>
            <span v-else>
              <a-tag color="#3BBDAA" v-if="data.is_release==1">进行中</a-tag>
              <a-tag color="#2db7f5" v-else>未发布</a-tag>
            </span>
            <span class="title_text">
              <span v-if="data.template&&data.template.title">【{{data.template.title}}】</span>
              <span v-if="data.activity_title">{{data.activity_title}}</span>
            </span> -->
            <a-tag color="#2db7f5">{{ formType }}</a-tag>
            <span class="name">{{ formTitle }}</span>
          </div>
          <div class="displayFlex">
            <div class="count_area">
              <div class="title">总提交量</div>
              <div class="number">{{ count.submission }}</div>
            </div>
            <div class="count_area center">
              <div class="title">今日提交量</div>
              <div class="number">{{ count.today_submit_num }}</div>
            </div>
            <div class="count_area">
              <div class="title">总浏览量</div>
              <div class="number">{{ count.all_look_num }}</div>
            </div>
          </div>
        </div>
      </a-card>
      <a-card
        v-if="showTabs"
        :bordered="false"
        style="margin-top: 8px"
        :bodyStyle="{ padding: '0 16px', 'padding-top': '6px' }"
      >
        <a-tabs v-model="tabsValue">
          <a-tab-pane :key="1" tab="趋势分析">
            <!-- <time-component v-bind:data="data"></time-component> -->
            <trend-analysis :id="id"></trend-analysis>
          </a-tab-pane>
          <a-tab-pane :key="2" :tab="'采单统计'" v-if="type == 1">
            <!-- <diffuse v-bind:data="data" :count="count"></diffuse> -->
            <order-statistics :id="id" />
          </a-tab-pane>
        </a-tabs>
      </a-card>
      <a-card :bordered="false" style="margin-top: 8px" :bodyStyle="{ padding: '0 16px', 'padding-top': '6px' }">
        <div class="tb-hd">
          <span class="title">数据统计</span>
          <a-button @click="exportFile">导出</a-button>
        </div>
        <div class="tb-box" v-if="empty">
          <table  class="form-table">
            <thead>
              <th v-for="(item,index) in columns" :key="index" class="tb-header">{{item.title}}</th>
            </thead>
            <tbody class="tbody">
              <tr v-for="(item,index) in formContent" :key="index+1" :class="{'active':index%2!=0}" class="tb-tr tr-acitve">
                <td v-for="(val,j) in item" :key="j+20" >
                  <span v-if="j<item.length-1&&val.type!=15">{{val.value}}</span>
                  <a v-else-if="val.type==15" @click="lookImg(val)">查看图片</a>
                  <a v-else @click="editForm(item)">查看详情</a>
                </td>
              </tr>
            </tbody>
          </table>
          
        </div>
        <div v-else class="table-empty">
             <a-empty :description="false" />
             <div>暂无数据</div>
        </div>
        <div v-if="pagination" class="page-box">
          <div>共{{pagination.total}}条数据</div>
          <a-pagination v-model="nowPage" :total="pagination.total" @change="changePage"/>
        </div>
      </a-card>
    </a-spin>
    <a-modal v-model="visible" title="查看详情" :footer="null" :width="680">
      <div style="margin-bottom:5px;font-size:12px;color:#999;" v-if="inForData">提交时间：{{inForData[0].value||'-'}}</div>
      <div class="sale-orders-wrap" v-if="inForData&&$route.query.type==1">采单员：{{inForData[1].value||'-'}}</div>
      <div class="item-list">
        <div class="form-list-item" v-for="(item,index) in inForData" :key="index" v-if="index>1&&index!=inForData.length-1">
          <div class="form-item-left-label">{{item.name}}</div>
          <div v-if="item.type==15">
            <img :src="val" alt="" v-for="(val,i) in item.value" :key="i" style="width: 60px;height: 60px;margin-right:10px;" @click="lookImg(val)">
          </div>
          <div v-else>{{item.value}}</div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model="visibleImg" title="查看详情" :footer="null" :width="680" :z-index="1001">
      <div class="appendix-img-show" v-if="imgArr instanceof Array">
        <img :src="item" alt="" v-for="(item,index) in imgArr" :key="index" class="appendix-img"/>
      </div>
      <div v-else style="display: flex;justify-content: center;">
        <img :src="imgArr" alt=""  class="appendix-img"/>
      </div>
    </a-modal>

  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'
import { statistics, studentList,dataExport } from '@/api/customForm'
import moment from 'moment'
import trendAnalysis from './child/trendAnalysis'
import orderStatistics from './child/orderStatistics'
import { STable } from '@/components'
export default {
  components: {
    topNavBar,
    // timeComponent,
    // diffuse,
    trendAnalysis,
    orderStatistics,
    STable,
  },
  data() {
    return {
      empty:true,
      nowPage:1,
      pagination:undefined,
      printtitle: '数据统计',
      formType: '',
      visible:false,
      visibleImg:false,
      imgArr:[],
      formTitle: '',
      type: 1,
      id: undefined,
      loading: true,
      tabsValue: 1,
      count: {
        submission: null,
        today_submit_num: null,
        all_look_num: null,
      },
      //   data: {
      //     is_release: null,
      //     activity_title: null,
      //     end_time: null,
      //   },
      showTabs: false,
      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
      columns: [
        {
          title: '提交时间',
          dataIndex:'created_at'
        },
        {
          title: '采单员',
          dataIndex:'user_name'
        },
      ],
      
      formContent:[],
      // 加载数据方法 必须为 Promise 对象
      queryParam: {
        school_id: this.$store.state.user.school,
      },
      // studentData: [],
      inForData:undefined
    }
  },
 
  created() {
    this.formTitle = this.$route.query.title
    this.type = this.$route.query.type
    this.id = Number(this.$route.query.id)
    if (this.$route.query.type == 1) {
      this.formType = '销售采单'
    }
    if (this.$route.query.type == 2) {
      this.formType = '课后活动报名'
    }
    if (this.$route.query.type == 3) {
      this.formType = '问卷调查'
    }
    statistics(Number(this.$route.query.id))
      .then((res) => {
        this.count = {
          submission: res.all_submit_num,
          today_submit_num: res.today_submit_num,
          all_look_num: res.all_look_num,
        }
        this.data = res
        this.showTabs = true
      })
      .catch((err) => {
        this.$message.error(err.data.message || '加载失败，请刷新后重试~')
      })
      .finally(() => {
        this.loading = false
      })
    this.getData()
  },
  methods: {
    moment,
    lookImg(data){
      if(data.value){
         this.imgArr=data.value
      }else{
        this.imgArr=data
      }
     
       this.visibleImg=true
    },
    editForm(data){
      this.visible=true
      this.inForData=data
      this.columns.forEach((item,index)=>{
        this.inForData[index].name=item.title
      })
      console.log(this.inForData);
    },
    exportFile(){
      dataExport(this.id,{school_id:this.$store.state.user.school}).then(res=>{
         window.location.href = res.url.url + res.url.path
      })
    },
    changePage(page, pageSize){
      this.nowPage=page
      this.getData(page,pageSize)
    },
    getData(pageNo = 1, pageSize = 10) {
      // let formContent=[]
      let formHeade=[]
      this.columns=[
        {
          title: '提交时间',
          dataIndex:'created_at'
        },
      ]
      if(this.$route.query.type==1){
        this.columns.push({
          title: '提交时间',
          dataIndex:'user_name'
        })
      }
      this.formContent=[]
      this.loading=true
      studentList(this.$route.query.id, { pageNo:pageNo,pageSize: pageSize }).then((res) => {
            if(res.data.length==0){
              this.empty=false
            }else{
              
            formHeade=res.data[0].template_content.formList
            for(let i=0;i<res.data.length;i++){
              if(res.data[i].template_content.formList.length>formHeade.length){
                formHeade=res.data[i].template_content.formList
              }
            }
          
          
          res.data.forEach((item,index)=>{
            if(this.$route.query.type==1){
              this.formContent.push([{value:item.created_at},{value:item.user_name}])
            }else{
               this.formContent.push([{value:item.created_at}])
            }
            
          })
          console.log(res.data);
          formHeade.forEach((item,index)=>{
            if(item.type!=14){
              this.columns.push({
              title:item.name,
            })
            }
            
          })
          this.columns.push({
            title:'操作'
          })
         
          this.formContent.forEach((val,index)=>{
            res.data[index].template_content.formList.forEach(item=>{
              if(!item.content){
                item.content=''
              }
              if(item.type!=14){
                val.push({value:item.content,type:item.type})
              }
            })
            val.push({
              value:'查看详情'
            })
          })
            }
            
          this.pagination=res.meta.pagination 
          console.log(this.formContent,this.columns);
      }).catch(err=>{
        this.$message.error(err.data.message||'获取失败')
      }).finally(()=>{
         this.loading=false
      }) 
    },
  },
  getInfo(){

  },
}
</script>

<style lang="less" scoped>
.topCard {
  .title {
    span {
      display: inline-block;
      vertical-align: middle;
    }
    .title_text {
      font-weight: 500;
      font-size: 20px;
    }
  }
  .displayFlex {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .count_area {
      padding: 10px;
      flex: 1 1;
      width: 100%;
      text-align: center;
      .number {
        font-size: 24px;
        color: #333;
        margin: 2px 0;
      }
    }
    .center {
      margin: 10px 0;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
    }
  }
}
.name {
  height: 28px;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  line-height: 28px;
  margin-left: 12px;
  display: inline-block;
}
.form-table{
  min-width: 100%;
  border-radius: 3px;
  // color: rgba(0,0,0,.65);
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  // text-align: center;
}
.tb-header{
  border-bottom: 1px solid #e8e8e8;
  background: #f7f8f9;
  height: 37px;
  // line-height: 37px;
}
.active{
  background: #f7f8f9;
}
.tb-tr{
  height: 37px;
}
.tbody{
  display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
    
}
tr td{
      color: #666;
      padding: 8px;
}
thead th{
  box-sizing: border-box;
  padding: 8px;
  color: #333;
  font-weight: 400 !important;
}
tr th{
  color: #333;

}
.tb-box{
  border: 1px solid #e8e8e8;
}
.tb-hd{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  margin-bottom: 10px;
  .title{
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
}
.item-list{
  width: 632px;
    max-height: 408px;
    border-radius: 2px;
    border: 1px solid #e8e8e8;
    overflow: scroll;
    padding: 0 12px;
    margin-top: 8px;
}
.form-list-item{
  display: flex;
  border-bottom: 1px dashed #e8e8e8;
  padding: 10px 0;
}
.form-item-left-label{
  width: 140px;
    font-size: 14px;
    color: #999;
    line-height: 20px;
    margin-right: 40px;
}
.sale-orders-wrap{
  width: 632px;
    height: 33px;
    line-height: 33px;
    background: #f4f6fa;
    padding-left: 12px;
}
.appendix-img-show{
      height: 400px;
    text-align: center;
    padding-bottom: 30px;
    overflow: scroll;
}
.appendix-img{
  margin-bottom: 10px;
}
.page-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:20px 5;
  margin: 16px 0;
}
// #F3F6FA
.tr-acitve:hover{
  background: #F3F6FA;
}
.table-empty{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #999;
}
</style>